<template>
  <div class="category-videos">
    <!-- 引用导航栏组件 -->
    <Navbar />

    <!-- 主内容区 -->
    <main class="main-content">
      <div class="container">
        <div class="content-wrapper">
          <!-- 左侧主内容 -->
          <div class="main-left">
            <!-- 分类信息头部 -->
            <div class="category-header">
              <h1>{{ categoryData.name || '分类视频' }}</h1>
              <p class="category-description">{{ categoryData.description || '暂无分类描述' }}</p>
            </div>

            <!-- 分类视频列表 -->
            <div class="category-section">
              <div class="video-grid">
                <VideoCard 
                  v-for="video in videosData" 
                  :key="video.id" 
                  :video="video"
                />
              </div>
              
              <div v-if="loading" class="loading">
                加载中...
              </div>
              
              <div v-if="!loading && videosData.length === 0" class="no-data">
                该分类暂无视频
              </div>
            </div>
          </div>

          <!-- 右侧边栏 -->
          <div class="main-right">
            <!-- 推荐视频 -->
            <aside class="recommend-section">
              <div class="sidebar-header">
                <h3 class="sidebar-title">推荐视频</h3>
              </div>
              <div class="video-list">
                <VideoListItem 
                  v-for="video in recommendedVideos" 
                  :key="video.id"
                  :video="video"
                />
              </div>
            </aside>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-links">
            <div class="footer-col">
              <h4>关于我们</h4>
              <ul>
                <li><a href="#">关于哔哩哔哩</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">友情链接</a></li>
              </ul>
            </div>
            <div class="footer-col">
              <h4>服务支持</h4>
              <ul>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">侵权投诉</a></li>
                <li><a href="#">用户反馈</a></li>
                <li><a href="#">用户协议</a></li>
              </ul>
            </div>
            <div class="footer-col">
              <h4>社区</h4>
              <ul>
                <li><a href="#">创作中心</a></li>
                <li><a href="#">直播中心</a></li>
                <li><a href="#">活动中心</a></li>
                <li><a href="#">排行榜</a></li>
              </ul>
            </div>
            <div class="footer-col">
              <h4>客户端下载</h4>
              <ul>
                <li><a href="#">iOS客户端</a></li>
                <li><a href="#">Android客户端</a></li>
                <li><a href="#">PC客户端</a></li>
                <li><a href="#">TV客户端</a></li>
              </ul>
            </div>
          </div>
          <div class="footer-copyright">
            <p>© 2025 Bilibili. All Rights Reserved.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import VideoCard from '../components/VideoCard.vue';
import VideoListItem from '../components/VideoListItem.vue';
import Navbar from '../components/Navbar.vue';
import videoApi from '../api/videoApi';
import categoryApi from '../api/categoryApi';

export default {
  name: 'CategoryVideos',
  components: {
    VideoCard,
    VideoListItem,
    Navbar
  },
  setup() {
    const route = useRoute();
    const categoryId = route.params.id;
    const videosData = ref([]);
    const categoryData = ref({});
    const recommendedVideos = ref([]);
    const loading = ref(true);
    
    // 获取分类信息
    const fetchCategoryInfo = async () => {
      try {
        console.log('正在获取分类信息，ID:', categoryId);
        const response = await categoryApi.getCategoryById(categoryId);
        console.log('分类信息获取成功:', response.data);
        categoryData.value = response.data || {};
      } catch (error) {
        console.error('获取分类信息失败:', error);
        // 使用模拟数据
        categoryData.value = {
          id: categoryId,
          name: `模拟分类${categoryId}`,
          description: `这是ID为${categoryId}的分类描述，包含各种精彩视频内容。`,
          icon_url: '/default-cover.svg'
        };
      }
    };
    
    // 获取分类下的视频
    const fetchCategoryVideos = async () => {
      try {
        console.log('正在获取分类视频，分类ID:', categoryId);
        loading.value = true;
        const response = await videoApi.getVideosByCategory(categoryId, { page: 1, pageSize: 20 });
        console.log('分类视频获取成功:', response.data);
        videosData.value = response.data?.list || response.data || [];
      } catch (error) {
        console.error('获取分类视频失败:', error);
        // 使用模拟数据
        videosData.value = [
          {
            id: 1,
            title: '模拟视频标题1',
            cover_url: '/default-cover.svg',
            view_count: 12345,
            published_at: '2024-01-01',
            nickname: '模拟UP主',
            avatar: '/default-avatar.svg',
            duration: '10:30'
          },
          {
            id: 2,
            title: '模拟视频标题2',
            cover_url: '/default-cover.svg',
            view_count: 6789,
            published_at: '2024-01-02',
            nickname: '模拟UP主',
            avatar: '/default-avatar.svg',
            duration: '08:45'
          },
          {
            id: 3,
            title: '模拟视频标题3',
            cover_url: '/default-cover.svg',
            view_count: 3456,
            published_at: '2024-01-03',
            nickname: '模拟UP主',
            avatar: '/default-avatar.svg',
            duration: '15:20'
          },
          {
            id: 4,
            title: '模拟视频标题4',
            cover_url: '/default-cover.svg',
            view_count: 9876,
            published_at: '2024-01-04',
            nickname: '模拟UP主',
            avatar: '/default-avatar.svg',
            duration: '07:15'
          },
          {
            id: 5,
            title: '模拟视频标题5',
            cover_url: '/default-cover.svg',
            view_count: 5432,
            published_at: '2024-01-05',
            nickname: '模拟UP主',
            avatar: '/default-avatar.svg',
            duration: '12:40'
          }
        ];
      } finally {
        loading.value = false;
      }
    };
    
    // 获取推荐视频
    const fetchRecommendedVideos = async () => {
      try {
        const response = await videoApi.getRecommendedVideos({ page: 1, pageSize: 10 });
        console.log('推荐视频获取成功:', response);
        if (response.code === 200) {
          recommendedVideos.value = response.data.list;
        } else {
          // 使用模拟数据
          recommendedVideos.value = [
            {
              id: 201,
              title: '推荐视频1',
              cover_url: '/default-cover.svg',
              view_count: 56789,
              danmaku_count: 1234,
              nickname: 'UP主小明',
              duration: '03:45'
            },
            {
              id: 202,
              title: '推荐视频2',
              cover_url: '/default-cover.svg',
              view_count: 45678,
              danmaku_count: 890,
              nickname: 'UP主小红',
              duration: '04:12'
            },
            {
              id: 203,
              title: '推荐视频3',
              cover_url: '/default-cover.svg',
              view_count: 34567,
              danmaku_count: 567,
              nickname: 'UP主小李',
              duration: '05:20'
            }
          ];
        }
      } catch (error) {
        console.error('获取推荐视频失败:', error);
        // 使用模拟数据
        recommendedVideos.value = [
          {
            id: 201,
            title: '推荐视频1',
            cover_url: '/default-cover.svg',
            view_count: 56789,
            danmaku_count: 1234,
            nickname: 'UP主小明',
            duration: '03:45'
          },
          {
            id: 202,
            title: '推荐视频2',
            cover_url: '/default-cover.svg',
            view_count: 45678,
            danmaku_count: 890,
            nickname: 'UP主小红',
            duration: '04:12'
          }
        ];
      }
    };
    
    onMounted(async () => {
      // 并行请求所有数据
      await Promise.all([
        fetchCategoryInfo(),
        fetchCategoryVideos(),
        fetchRecommendedVideos()
      ]);
    });
    
    return {
      videosData,
      categoryData,
      recommendedVideos,
      loading,
      categoryId
    };
  }
};
</script>

<style scoped>
.category-videos {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 头部样式 - 复用Home.vue的头部样式 */
.header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-top {
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fb7299;
}

.logo a {
  color: inherit;
  text-decoration: none;
}

.search-box {
  flex: 1;
  display: flex;
  max-width: 500px;
}

.search-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.search-btn {
  padding: 8px 16px;
  background-color: #fb7299;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.login-btn {
  padding: 8px 20px;
  background-color: #fb7299;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}

/* 分类导航 */
.category-nav {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.category-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-item {
  padding: 10px 15px;
}

.category-link {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: color 0.3s;
}

.category-link:hover,
.category-link.active {
  color: #fb7299;
}

/* 主内容区 */
.main-content {
  padding: 20px 0;
}

.content-wrapper {
  display: flex;
  gap: 20px;
}

.main-left {
  flex: 1;
}

.main-right {
  width: 300px;
  flex-shrink: 0;
}

/* 分类头部信息 */
.category-header {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.category-header h1 {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}

.category-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* 分类视频区域 */
.category-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.loading,
.no-data {
  text-align: center;
  padding: 40px 0;
  color: #999;
  font-size: 16px;
}

/* 侧边栏样式 */
.recommend-section {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.sidebar-header {
  margin-bottom: 15px;
}

.sidebar-title {
  margin: 0;
  font-size: 16px;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 页脚样式 - 复用Home.vue的页脚样式 */
.footer {
  background-color: #2c2e3a;
  color: #999;
  padding: 40px 0;
  margin-top: 40px;
}

.footer-links {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.footer-col {
  flex: 1;
}

.footer-col h4 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col a {
  color: #999;
  text-decoration: none;
  font-size: 14px;
}

.footer-col a:hover {
  color: #fff;
}

.footer-copyright {
  text-align: center;
  font-size: 14px;
  padding-top: 20px;
  border-top: 1px solid #444;
}

/* 响应式布局 */
@media (max-width: 1024px) {
  .main-right {
    display: none;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 768px) {
  .header-top {
    flex-wrap: wrap;
  }
  
  .search-box {
    order: 3;
    width: 100%;
    margin-top: 10px;
  }
  
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
  
  .category-header h1 {
    font-size: 20px;
  }
  
  .category-description {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
</style>